<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-19 13:47:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/app-tree.js"></script>
    <style type="text/css">
        .bottom {
            padding: 8px 15px;
        }

        .van-field__control {
            font-size: 16px;
        }

        .pictitle {
            line-height: 24px;
            color: #646566;
            user-select: none;
        }

        .piccontent {
            padding-top: 10px;
            overflow: hidden;
        }

        .van-uploader__preview {
            margin-right: 15px;
        }

        .rework-title {
            padding: 10px 16px;
            color: #a3a3a3;
            text-align: center;
        }

        .delete-img img {
            position: absolute;
            transform: translate(-50%, -50%);
            right: 1%;
            top: 50%;
            width: 20px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar-main title="5S评审详情" left-arrow @click-left="onClickLeft">
                <div slot="right" @click="modifyScore" v-if="userInfo.UserID==19">
                    <span style="font-size: 18px;color:cadetblue;">评分修改</span>
                </div>
            </van-nav-bar-main>
            <div class="content">
                <div v-for="(row,rowIndex) in dataList">
                    <van-cell span="24">
                        <div class="flex-box">
                            <div class="flex-main">
                                <span
                                    style="font-size:16px;color:royalblue;font-weight:bold;">第{{dataList.length-rowIndex}}次评分</span>
                            </div>
                            <div class="delete-img" @click.stop="deleteRow(row,rowIndex)"
                                v-if="!row.FSDealID || userInfo.UserID==19">
                                <img src="../image/sc.png" />
                            </div>
                        </div>
                    </van-cell>
                    <van-field v-model="row.Score" label="扣分" required center colon readonly>
                    </van-field>

                    <div>
                        <van-field v-model="row.ToUserName" label="责任人" required center colon
                            @click="selectResPerson(row,rowIndex)" readonly>
                            <van-icon slot="right-icon" name="arrow" size="16px"></van-icon>
                        </van-field>
                        <van-field label="问题描述" v-model="row.Description" rows="3" required center colon autosize
                            type="textarea" placeholder="请输入整改意见">
                        </van-field>
                        <van-cell>
                            <div class="pictitle"><span style="color:red;">*</span>现场照片:</div>
                            <div class="piccontent">
                                <div class="van-uploader">
                                    <div class="van-uploader__wrapper">
                                        <div class="van-uploader__preview"
                                            v-for="(imgItem,imgItemIndex) in row.imgArray">
                                            <div class="van-image van-uploader__preview-image"
                                                style="overflow: hidden; border-radius: 4px;"
                                                @click="previewImage(imgItemIndex,row,rowIndex)">

                                                <img :src="serverIP + imgItem" class="van-image__img"
                                                    style="object-fit: cover;" />
                                            </div>
                                            <div class="van-uploader__preview-delete"
                                                @click="deleteImgItem(imgItemIndex,row,rowIndex)">
                                                <i
                                                    class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
                                            </div>

                                        </div>
                                        <div class="van-uploader__upload" v-if="row.imgArray.length < 9"
                                            @click="addImage(row.imgArray.length,row,rowIndex)">
                                            <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-cell>
                    </div>

                </div>


            </div>

            <div class="bottom">
                <div class="flex-main">
                    <van-row gutter="30">
                        <van-col :span="12">
                            <van-button type="info" block round :disabled="ifConfirm" :loading="ifConfirm"
                                @click="addRow">新增评分</van-button>
                        </van-col>
                        <van-col :span="12">
                            <van-button type="info" block round :disabled="ifConfirm" :loading="ifConfirm"
                                @click="dealWithProblem">提交评分</van-button>
                        </van-col>
                    </van-row>
                </div>
            </div>

        </div>

    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {

        var UIAlbumBrowser = api.require('UIAlbumBrowser');
        var photoBrowser = api.require('photoBrowser');
        var isOpenImg = false;

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            if (!isOpenImg) {
                vm.onClickLeft();
            } else {
                photoBrowser.close();
            }

        });

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '人员') {
                vm.dataList[vm.curRowIndex].ToUserID = row[0].UserID;
                vm.dataList[vm.curRowIndex].ToUserName = row[0].UserName;
            }
        })


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                id: api.pageParam.id,
                IsSerious: api.pageParam.IsSerious, //是否严重
                ifConfirm: false,
                serverIP: 'http://' + APP.serverIP(),
                curRowIndex: 0,//当前点评行
                dataList: [],
                userInfo: {}
            },
            created: function () {
                var that = this;
                that.getPageData();
                that.userInfo = APP.getUserInfo();
            },
            methods: {
                //加载页面数据
                getPageData() {
                    var that = this;
                    APP.ajax('5S_GetDealByDaily', { DailyFSDeID: that.id }, function (res) {
                        for (var i in res.ds) {
                            if (res.ds[i].DImgs)
                                res.ds[i].imgArray = res.ds[i].DImgs.split(',');
                            else
                                res.ds[i].imgArray = [];
                        }
                        vm.dataList = res.ds;
                    })
                },
                //发起问题整改
                dealWithProblem() {
                    var matchRow = vm.dataList.find(item => item.FSDealID === 0);
                    var obj;
                    if (matchRow) {
                        obj = {
                            DailyFSDeID: vm.id,
                            ToUserID: matchRow.ToUserID,
                            DImgs: matchRow.imgArray.join(','),
                            Description: matchRow.Description,
                            Score: matchRow.Score
                        }
                    } else {
                        layer.open({
                            content: '请先打分!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    console.log(JSON.stringify(obj))
                    APP.ajax('5S_addDeal', obj, function (res) {
                        if (res.ds[0].status == 500) {
                            layer.open({
                                content: res.ds[0].msg,
                                skin: 'msg',
                                time: 2
                            });
                            return false;
                        } else {
                            vm.$dialog.alert({ title: '提示', message: '打分成功!' }).then(function () {
                                api.closeWin();
                                api.sendEvent({
                                    name: 'refreshFSDe'
                                })
                            })
                            vm.getPageData();
                        }
                    })
                },
                //修改已提交评分(管理员权限,目前钱可)
                modifyScore() {
                    var matchRows = vm.dataList.filter(item => item.FSDealID !== 0);
                    var obj;
                    var FSDealID = [], ToUserID = [], DImgs = [], Description = []
                    if (matchRows.length) {
                        for (var i = 0; i < matchRows.length; i++) {
                            FSDealID.push(matchRows[i].FSDealID);
                            if (matchRows[i].ToUserID)
                                ToUserID.push(matchRows[i].ToUserID);
                            else
                                ToUserID.push(0);
                            if (matchRows[i].imgArray.length) {
                                DImgs.push(matchRows[i].imgArray.join(','));
                            }
                            Description.push(matchRows[i].Description);
                        }
                    } else {
                        layer.open({
                            content: '当前没有可提交修改内容!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    obj = {
                        FSDealID: FSDealID.join('~'),
                        ToUserID: ToUserID.join('~'),
                        DImgs: DImgs.join('~'),
                        Description: Description.join('~')
                    }

                    // console.log(JSON.stringify(obj))
                    APP.ajax('5S_modifyDeal', obj, function (res) {
                        if (res.ds[0].status == 500) {
                            layer.open({
                                content: res.ds[0].msg,
                                skin: 'msg',
                                time: 2
                            });
                            return false;
                        } else {
                            vm.$dialog.alert({ title: '提示', message: '修改成功!' }).then(function () {
                                vm.getPageData();
                            })
                        }
                    })
                },
                //新增评分行
                addRow: function () {
                    var IsExistsBlankRow = vm.dataList.some(item => item.FSDealID === 0);   //是否空白行
                    // var scoreTimes = vm.dataList.filter((item) => { return item.FSDealID !== 0 }).length;   //已打分次数
                    // if (scoreTimes >= 2) {
                    //     layer.open({
                    //         content: '每周最多允许打分两次!',
                    //         skin: 'msg',
                    //         time: 2
                    //     });
                    //     return false;
                    // }

                    if (!IsExistsBlankRow) {
                        var obj = {
                            FSDealID: 0, //问题处理主键
                            Score: vm.IsSerious ? 5 : 2,    //严重5分 一般2分
                            ToUserID: 0,
                            ToUserName: '',
                            Description: '',
                            imgArray: []
                        }
                        vm.dataList.unshift(obj);
                    } else {
                        layer.open({
                            content: '每次只允许提交一次打分!',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                },
                //删除评分行
                deleteRow: function (row, rowIndex) {
                    if (row.FSDealID) {
                        APP.ajax('5S_delRowDeal', { FSDealID: row.FSDealID, DailyFSDeID: vm.id }, function (res) {
                            if (res.ds[0].status == 500) {
                                layer.open({
                                    content: res.ds[0].msg,
                                    skin: 'msg',
                                    time: 2
                                });
                                return false;
                            } else {
                                vm.$dialog.alert({ title: '提示', message: '删除成功!' }).then(function () {
                                    vm.getPageData();
                                })
                            }
                        })
                    }
                    vm.dataList.splice(rowIndex, 1);
                },
                //选择责任人
                selectResPerson(row, rowIndex) {
                    vm.curRowIndex = rowIndex;
                    vm.openBaseScreen('人员');
                },
                previewImage: function (index, row, rowIndex) {
                    var that = this;
                    // var array = JSON.parse(JSON.stringify(that.imgArray));
                    var array = JSON.parse(JSON.stringify(row.imgArray));
                    for (var i in array) {
                        array[i] = that.serverIP + array[i];
                    }
                    photoBrowser.open({
                        images: array,
                        activeIndex: index,
                        bgColor: '#000'
                    }, function (ret) {
                        isOpenImg = true;
                        if (ret) {
                            if (ret.eventType == 'click') {
                                isOpenImg = false;
                                photoBrowser.close();
                            }
                        }
                    })
                },
                deleteImgItem: function (index, row, rowIndex) {
                    // var that = this;
                    // that.imgArray.splice(index, 1)
                    row.imgArray.splice(index, 1);
                },
                addImage: function (len, row, rowIndex) {
                    var that = this;
                    UIAlbumBrowser.imagePicker({
                        max: 9 - len,
                        styles: {
                            nav: {
                                bg: 'rgba(0,0,0,.6)',
                                finishText: '完成'
                            }
                        },
                        rotation: true
                    }, function (ret) {
                        if (ret) {
                            if (ret.originalPath) {
                                UIAlbumBrowser.transPath({
                                    path: ret.assetPath || ret.originalPath
                                }, function (ret, err) {
                                    if (ret) {
                                        APP.uploadFile('备注图片', ret.path, function (path) {
                                            // that.imgArray.push(path);
                                            row.imgArray.push(path);
                                        })

                                    }
                                });
                            } else if (ret.eventType == 'nextStep') {
                                UIAlbumBrowser.closePicker();
                                var imgLists = ret.list;
                                var repeatImg = function (i) {
                                    if (i == imgLists.length) {
                                        return;
                                    }
                                    UIAlbumBrowser.transPath({
                                        path: imgLists[i].path
                                    }, function (ret, err) {
                                        if (ret) {
                                            APP.uploadFile('备注图片', ret.path, function (path) {
                                                // that.imgArray.push(path);
                                                row.imgArray.push(path);
                                            })
                                            i++;
                                            repeatImg(i);
                                        }
                                    });
                                }
                                repeatImg(0)

                            }

                        }
                    });
                },
                openBaseScreen(str) {
                    var obj;
                    if (str == '人员') {
                        obj = {
                            allowClear: false,
                            cmd: 'getCkUserList',
                            type: str,
                            localSearch: {
                                showText: 'UserName',		//查询结果显示的字段
                                searchBy: ['UserName']		//按那些字段进行搜索
                            },
                            param: {

                            }

                        }
                    }
                    api.openWin({
                        name: 'baseScreen',
                        url: 'tool/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: true,
                        pageParam: obj
                    })
                },
                onClickLeft: function () {
                    var that = this;
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>